/*!
 * Ext JS Library 3.2.1
 * Copyright(c) 2006-2010 Ext JS, Inc.
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

Ext.onReady(function() {

	// Takes the code from the editors and gives it to the viewers for rendering
	var resetViewerCode = function() {
		// Grab code and normalize line breaks
		var codeA = Ext.getCmp('codeEditorA').getCode().replace(/\r\n?/g, '\n'), codeB = Ext
				.getCmp('codeEditorB').getCode().replace(/\r\n?/g, '\n'),
		// Split code into lines
		linesA = codeA.split('\n'), linesB = codeB.split('\n'),
		// Perform diff
		diff = Ext.ux.CodeViewer.diff(linesA, linesB);

		// Give code to viewer for rendering
		Ext.getCmp('codeViewerA').setCode(codeA, diff);
		Ext.getCmp('codeViewerB').setCode(codeB, diff);
	};

	// Create the main layout
	new Ext.Viewport({
				layout		: 'border',
				items		: [{
							xtype	: 'box',
							height	: 36,
							region	: 'north',
							applyTo	: 'header'
						}, {
							region	: 'center',
							layout	: {
								type	: 'hbox',
								align	: 'stretch'
							},
							tbar	: [{
								xtype			: 'button',
								text			: 'Edit Mode',
								enableToggle	: true,
								toggleHandler	: function(button, toggled) {
									// Switch between showing editors and viewers
									Ext.getCmp('sideA').layout
											.setActiveItem(toggled ? 1 : 0);
									Ext.getCmp('sideB').layout
											.setActiveItem(toggled ? 1 : 0);

									// If switching back to viewers, re-render
									if (!toggled) {
										resetViewerCode();
									}
								}
							}],
							items	: [{
										id			: 'sideA',
										title		: 'Side A',
										layout		: 'card',
										flex		: 1,
										margins		: "6 3 6 6",
										activeItem	: 0,
										items		: [{
													id		: 'codeViewerA',
													xtype	: 'codeViewer',
													style	: "overflow: scroll",
													sideA	: true
												}, {
													id		: 'codeEditorA',
													xtype	: 'codeEditor'
												}]
									}, {
										id			: 'sideB',
										title		: 'Side B',
										layout		: 'card',
										flex		: 1,
										margins		: "6 6 6 3",
										activeItem	: 0,
										items		: [{
													id		: 'codeViewerB',
													xtype	: 'codeViewer',
													style	: "overflow: scroll",
													sideA	: false
												}, {
													id		: 'codeEditorB',
													xtype	: 'codeEditor'

												}]
									}]
						}],
				renderTo	: Ext.getBody()
			}
	);

	// Setup vertical scrollbar sync
	var codeViewerA = Ext.getCmp('codeViewerA'), codeViewerB = Ext
			.getCmp('codeViewerB'), syncScrollBars = function(e) {
		var scrollTop = this.dom.scrollTop;
		codeViewerA.el.dom.scrollTop = scrollTop;
		codeViewerB.el.dom.scrollTop = scrollTop;
	};
	codeViewerA.el.on("scroll", syncScrollBars);
	codeViewerB.el.on("scroll", syncScrollBars);

	// Grab default code from page
	var defaultCodeA = Ext.get('defaultA').dom.defaultValue, defaultCodeB = Ext
			.get('defaultB').dom.defaultValue;

	// Set the default code in the editors
	Ext.getCmp('codeEditorA').setCode(defaultCodeA);
	Ext.getCmp('codeEditorB').setCode(defaultCodeB);

	// Set the default code in the viewers
	resetViewerCode(defaultCodeA, defaultCodeB);
}
);